//初始化Web Uploader
var uploader = WebUploader.create({

    auto: false,                                         //自动上传
    swf: '../plugins/webuploader/Uploader.swf',     // swf文件路径
    server: '/users/file.do',                    // 文件接收服务端。
    pick: '#picker',                                     // 选择文件的按钮。可选。
    // accept: {  
    //     title: 'execl',  
    //     extensions: 'xls,xlsx',
    //     mimeTypes: 'application/vnd.ms-excel'  
    // },
    fileNumLimit: 10, //文件总数量, 超出则不允许加入队列                            //最大上传数量为10
    fileVal: 'pic',
    fileSingleSizeLimit: 2000 * 1024 * 1024,         //限制上传单个文件大小20M
    fileSizeLimit: 2000 * 1024 * 1024,              //限制上传所有文件大小200M
    resize: false,                                  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    // duplicate:true                                // 重复上传
});

//上传前的判断处理
uploader.on('error', function( type ){
    if ( type === 'Q_EXCEED_NUM_LIMIT' ) {
        layer.msg('最多允许上传10份表格');
    } 
    if ( type === 'F_DUPLICATE' ) {
        layer.msg('文件重复，不能上传！');
    }
    if (type=="Q_TYPE_DENIED"){
        layer.msg("请上传xls格式文件");
    }else if(type=="F_EXCEED_SIZE"){
        layer.msg("文件大小不能超过2000M");
    }
});

// 当有文件被添加进队列的时候
var $list = $("#thelist");
uploader.on( 'fileQueued', function( file ) {
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' + 
        '<a class="webuploadDelbtn cf">重新选择</a>&emsp;<a class="webuploadDelbtn">删除</a><br/><br/>' +
    '</div>' );
    $('#cf').css('display','none');
});

//点击开始上传
 $("#ctlBtn").on( 'click', function() {  
    uploader.upload();  
 });

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }
    $li.find('p.state').text('上传中');
    console.log(percentage)
    $percent.css( 'width', percentage * 100 + '%' );
});


//文件成功、失败处理
uploader.on( 'uploadSuccess', function( file ) {

    $( '#'+file.id ).find('p.state').text('已上传');
    $( '#'+file.id ).find('p.state').addClass('su');
    $( '#'+file.id ).find('a.webuploadDelbtn').remove();
});
//上传错误
uploader.on( 'uploadError', function( file ) {
    console.log(file)
    $( '#'+file.id ).find('p.state').text('上传出错');
    $( '#'+file.id ).find('p.state').addClass('active');
    $( '#'+file.id ).find('a.webuploadDelbtn').css('display','none');
});
//上传完成
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
    // uploader.reset();
    $('#cf').css('display','block');
});


//删除
$list.on("click", ".webuploadDelbtn", function () {
    var $ele = $(this);
    var id = $ele.parent().attr("id");
    var file = uploader.getFile(id);
    uploader.removeFile(file,true);  
    if($(this).hasClass('cf')){
        $('#picker input').trigger('click');
    }
}); 

//删除时执行的方法
uploader.on('fileDequeued', function (file) {
    $(file.id).remove();
    $('#'+file.id ).find('span.state').text('已经取消');
    $('#'+file.id).hide();   
    console.log("remove");     
}); 

// 再次上传
$('#cf button').on('click',function(){
    $('#picker input').trigger('click');
})